<template>
  <a-layout-header
    :class="[theme, 'global-header', fixedHeader]"
    :style="{left: fixedLeft}"
  >
    <!-- <div class="global-header-banner">
      <router-link
          v-if="isMobile || layout === 'head'"
          to="/"
          :class="['logo', isMobile ? null : 'pc', theme]"
        >
          <h1 v-if="!isMobile">{{systemName}}</h1>
        </router-link>
    </div> -->
    <div :class="['global-header-wide', layout]">
      <div class="global-header-left">
        <router-link
          v-if="isMobile || layout === 'head'"
          to="/"
          :class="['logo', isMobile ? null : 'pc', theme]"
        >
          <!-- <img width="32" src="static/img/vue-antd-logo.png" /> -->
          <template  v-if="!isMobile">
            <h1>{{title}}</h1>
            <h3 class="sub-title">{{subTitle}}</h3>
          </template>
        </router-link>
        <a-divider
          v-if="isMobile"
          type="vertical"
        />
        <a-icon
          v-if="layout === 'side'"
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="toggleCollapse"
        />
      </div>

      <div
        v-if="layout === 'head'"
        class="global-header-menu"
      >
        <i-menu
          style="height: 64px; line-height: 64px;"
          :theme="theme"
          mode="horizontal"
          :menuData="menuData"
          @select="onSelect"
        />
      </div>
      <div :class="['global-header-right', theme]">
        <SelectSubsidy />
        <SelectStyle />
        <header-avatar class="header-item" />
        <!-- <span @click="handleLogout" style="cursor: pointer; margin-left: 15px;">
          <a-icon type="logout" />
          <span style="margin-left: 5px;">退出登录</span>
        </span> -->
      </div>
    </div>
  </a-layout-header>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { State, Mutation, namespace, Action } from 'vuex-class'
import HeaderAvatar from './HeaderAvatar.vue'
import IMenu from '@/components/src/menu/menu'
import SelectStyle from '@/components/src/SelectStyle'
import SelectSubsidy from '@/components/src/SelectSubsidy'
import { appModule } from '@/store/modules/app'

const setting = namespace('setting')

import store from '@/store'
import { getModule } from 'vuex-module-decorators'
import User from '@/store/modules/user'
const user = getModule(User, store)

@Component({
  components: {
    IMenu,
    HeaderAvatar,
    SelectStyle,
    SelectSubsidy
  }
})
export default class GlobalHeader extends Vue {
  @Prop() public collapsed!: boolean
  @Prop({ type: Array, default: () => [] }) public menuData!: any[]

  @setting.State('layout') public layout!: string
  @setting.State('isMobile') public isMobile!: boolean
  @setting.State('systemName') public systemName!: string

  get theme() {
    return this.layout === 'side' ? 'light' : this.$store.state.setting.theme
  }

  get title() {
    return user.userInfo.admin_info.title1
  }
  get subTitle() {
    return user.userInfo.admin_info.title2
  }

  get fixedHeader() {
    return this.$store.state.setting.fixedHeader
      ? 'fixed-header'
      : 'nofixed-header'
  }

  get fixedLeft() {
    let left: string = '0'
    if (this.layout === 'side') {
      left = this.collapsed ? '80px' : '200px'
    }
    return left
  }

  public toggleCollapse() {
    this.$emit('toggleCollapse')
  }

  public onSelect(obj: any) {
    appModule.SET_CURRENT_MENU(obj)
    this.$emit('menuSelect', obj)
  }
}
</script>

<style lang="less" scoped>
.global-header-banner {
  width: 100%;
  height: 50px;
  text-indent: 20px;
  font-size: 22px;
  h1 {
    color: #333;
    margin: 0;
    // color: @primary-color;
    // -webkit-text-stroke: 2px #fff;
  }
}
.trigger {
  font-size: 20px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  &:hover {
    color: #1890ff;
  }
}
.header-item {
  padding: 0 12px;
  display: inline-block;
  height: 100%;
  cursor: pointer;
  vertical-align: middle;
  i {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
  }
}
.global-header {
  padding: 0 20px 0 0;
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  // /deep/ .ant-menu-submenu-selected {
  //   color: #fff;
  //   background: @primary-color;
  // }
  &.light {
    // background: linear-gradient(45deg, #c1dfc4, #deecdd);
    // background: linear-gradient(45deg, lighten(@primary-color, 15%), lighten(@primary-color, 35%));
    // background: linear-gradient(45deg, #feb657, #fecb85);
    // background: darken(@primary-color, 10%);
    // color: #fff;
    background: #fff;
    // background: url(~@/assets/header-banner.jpg) no-repeat center;
    background-size: cover;
  }

  // 暗色主题
  &.dark {
    background: #e1102d;
    h1 {
      color: #fff;
    }
    .select-subsidy /deep/ .ant-btn {
      color: #fff;
      border: 1px solid #fff;
    }
  }
  .global-header-wide {
    display: flex;
    align-items: center;
    width: 100%;
    .global-header-left {
      flex: none;
      height: 100%;
      line-height: 1.4;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 20px;
      // flex-direction: column;
      .select-subsidy {
        margin-left: 24px;
        height: 100%;
      }
    }
    /deep/ .ant-menu {
      background: none;
    }
    &.head {
      // max-width: 1200px;
      margin: auto;
      display: flex;
      height: 100%;
      .logo {
        flex: none;
        margin-left: 24px;
      }
      .global-header-menu {
        flex: 1;
        height: 100%;
        overflow: hidden;
        // display: flex;
        // align-items: flex-end;
      }
      .global-header-right {
        flex: none;
        display: flex;
        align-items: center;
      }
    }
    &.side {
    }
    
    .logo {
      height: 100%;
      display: flex;
      padding: 0 12px 0 24px;
      cursor: pointer;
      font-size: 24px;
      justify-content: center;
      flex-direction: column;
      &.pc {
        padding: 0px 20px 0 0;
      }
      img {
        display: inline-block;
        vertical-align: middle;
      }
      h1 {
        display: inline-block;
        font-size: 22px;
        font-weight: bold;
      }
      .sub-title {
        height: 20px;
        line-height: 20px;
        color: #fff;
        font-size: 14px;
      }
      // &.dark h1{
      //   color: #fff;
      // }
    }
    .global-header-menu {
      display: inline-block;
      margin-left: 20px;
      // max-width: 850px;
    }
    .global-header-right {
      flex: none;
      &.dark {
        color: #fff;
        i {
          color: #fff;
        }
      }
    }
  }
}
.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  transition: all 0.2s;
}
.nofixed-header {
  left: 0 !important;
}

/deep/ .ant-menu-horizontal.ant-menu-dark > li > a {
  color: #fff;
}
</style>
